<template>
	<view class="integral">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">
			</view>
			
			<image :src="bg" class="bg-img"></image>

			<view style="height: 120rpx;">
			</view>
			
			<view class="title" :style="{top:statusBarHeight}">
				积分商品
			</view>
		</view>
		<view class="tab-block">
			<view class="tab-txt  " :class="tabIndexCurrent==0?'check':'no-check'" @tap="tabChange(0)">全部商品</view>
			<view class=" tab-txt " :class="tabIndexCurrent==1?'check':'no-check'" @tap="tabChange(1)">我能兑换</view>
		</view>
		<view class="content" :style="contentStyle">
			<view class="filtrate-block">

				<block v-for="(item,index)  in filtrateLst" :key="index">
					<template v-if="index!==3">
						<view class="item" :class="selectedIndex==index?'item-check':'item-check-no'"
							@tap="selectedClick(index)">{{item}}</view>
					</template>

					<template v-if="index==3">
						<view class="item" :class="selectedIndex==index?'item-check':'item-check-no'"
							@tap="selectedChange(index)">{{item}}
							<view class="img-option">
								<view class="top-img center">
									<template v-if="integralType==true">
										<image :src="topShow" class="auto-img"></image>
									</template>
									<template v-if="integralType==false">
										<image :src="topIcon" class="auto-img"></image>
									</template>

								</view>
								<view class="bottom-img center">
									<template v-if="integralType==true">
										<image :src="bottomIcon" class="auto-img"></image>
									</template>
									<template v-if="integralType==false">
										<image :src="bottomShow" class="auto-img"></image>
									</template>
								</view>
							</view>
						</view>
					</template>
				</block>

			</view>
			<scroll-view :scroll-y="true" class="scroll-class">
				<view class="item-s" v-if="goods.length>0">
					<block v-for="(item,index) in goods" :key="index">
						<view class="item" @tap="itemClick(item.id,item)">
							<view class="img">
								<image :src="item.main_image" class="auto-img"></image>
							</view>
							<view class="info-block">
								<view class="title-option">{{item.title}}</view>
								<view class="info-option">
									<!-- <view class="price">¥{{item.price/100}}</view> -->
									<view class="hint-title">已兑{{item.sales_volume}}件</view>
								</view>
								<view class="buy-option">
									<view class="money-img center">
										<image :src="priceIcon" class="auto-img"></image>
									</view>
									<view class="nums">{{item.integral}}</view>
									<view class="buy-icon center">
										<image :src="buyIcon" class="auto-img"></image>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="no-emty" v-if="goods.length==0" style="font-size: 26rpx;color: #999;">暂无可兑换的商品，敬请期待</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: require('@/static/integral/bg.png'),
				priceIcon: require('@/static/integral/priceIcon.png'),
				statusBarHeight: 20,
				contentStyle: '',
				tabIndexCurrent: 0,
				selectedIndex: 0,
				filtrateLst: [
					'综合',
					'销量',
					'新品',
					'积分',
				],
				buyIcon: require('@/static/category/buy.png'),
			 
				topIcon: require('@/static/integral/topIcon.png'),
				bottomIcon: require('@/static/integral/bottomIcon.png'),
				topShow: require('@/static/integral/topShow.png'),
				bottomShow: require('@/static/integral/bottomShow.png'),
				integralType: true, //true 多 false 少
				goods: []
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			let contentHeight = (uni.getSystemInfoSync().statusBarHeight * 2) + 120 + 88
			let contentHeightStyle = `height: calc(100vh - ${contentHeight}rpx);`
			this.contentStyle = contentHeightStyle
			this.init()
		},
		methods: {
			init() {
				this.$http('goods.getIntegralCommodity', {
					token: this.$tools.getToken(),
					ranking: this.getRanking(),
					type: this.tabIndexCurrent,
				}).then(res => {
					if (res.code == 200) {
						this.goods = res.data.list
					}
				})
			},
			getRanking() {
				let selectedId = this.selectedIndex
				let integralType = this.integralType
				if (selectedId != 3) {
					return this.selectedIndex
				} else {
					if (integralType) {
						return 3
					} else {
						return 4
					}
				}
			},
			tabChange(index) {
				this.goods = []
				this.selectedIndex = 0
				this.tabIndexCurrent = index
				this.init()
			},
			selectedChange(index) {
				this.integralType = !this.integralType
				this.selectedIndex = index
				this.init()
			},
			selectedClick(index) {
				this.selectedIndex = index
				this.goods = []
				this.init()
			},
			itemClick(id,item) {
				uni.setStorageSync('integral',item.integral)
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + id + '&type=2'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #FAFAF5FF;
	}
</style>

<style lang="scss" scoped>
	.integral {
		height: 100vh;
	}

	.title-page {

		position: relative;

		.bg-img {
			position: absolute;
			top: 0;
			z-index: 11;
			right: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}

		.uni-status-bar {
			height: 20px;
		}

		.title {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 111;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}
	}

	.tab-block {
		position: relative;
		z-index: 333;
		top: -20rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.tab-txt {
			font-size: 28rpx;

			letter-spacing: 0rpx;
			color: rgba(0, 0, 0, 1);
		}

		.check {
			font-weight: 600;
			position: relative;

		}

		.check::after {
			content: '';
			position: absolute;
			bottom: 0rpx;
			left: 0;
			right: 0;
			z-index: -1;
			border-radius: 146rpx;
			background: rgba(255, 200, 47, 1);
			width: 112rpx;
			height: 8rpx;
		}

		.no-check {
			font-weight: 400;
		}
	}

	.content {
		padding: 0 24rpx;

		.filtrate-block {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.item {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
			}

			.item-check-no {
				color: rgba(102, 102, 102, 1);
			}

			.item-check {
				font-weight: 500;
				color: rgba(203, 60, 40, 1)
			}

			.img-option {
				margin-left: 6rpx;

				.top-img {
					width: 14rpx;
					height: 7rpx;
				}

				.bottom-img {
					margin-top: 6rpx;
					width: 14rpx;
					height: 7rpx;
				}
			}

		}

		.scroll-class {
			height: calc(100% - 60rpx);

			.item-s {
				display: flex;
				flex-wrap: wrap;

				justify-content: space-between;
				margin-bottom: 60rpx;

				.item {
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					background: #fff;
					margin-top: 24rpx;
					width: 340rpx;
					height: 572rpx;


					.img {
						border-radius: 8rpx 8rpx 0rpx 0rpx;
						width: 340rpx;
						height: 340rpx;

					}

					.info-block {
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-top: 20rpx;

						.title-option {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(27, 25, 25, 1);
						}

						.info-option {
							padding-bottom: 34rpx;
							border-bottom: 2rpx dashed rgba(238, 238, 238, 1);
							display: flex;
							align-items: center;
							margin-top: 12rpx;

							.price {
								color: rgba(27, 25, 25, 1);
								font-weight: 500;
								font-size: 30rpx;
							}

							.hint-title {
								font-size: 20rpx;
								font-weight: 400;
								margin-left: 16rpx;
								color: rgba(153, 153, 153, 1);
							}
						}
					}

					.buy-option {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						box-sizing: border-box;

						.money-img {

							width: 40rpx;
							height: 40rpx;
							flex: none;
						}

						.nums {
							margin-left: 8rpx;
							flex: auto;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(203, 60, 40, 1);
						}

						.buy-icon {
							flex: none;
							width: 44rpx;
							height: 44rpx;
						}
					}

				}
			}
		}
	}

	.no-emty {
		text-align: center;
		margin-top: 24rpx;
		font-size: 26rpx;
		color: #999;
	}
</style>
